<template>
  <Wrapper>
    <el-card
      header="grid拖拽"
      shadow="never"
    >
      <draggable
        v-model="gridList"
        class="grid-box"
        item-key="num"
        animation="300"
        chosenClass="chosen"
        forceFallback="true"
      >
        <template #item="{ element }">
          <div :class="[`item item-${element.num}`]">
            {{ element.num }}
          </div>
        </template>
      </draggable>
    </el-card>
    <el-card
      header="列表拖拽"
      shadow="never"
      class="card-box"
    >
      <draggable
        v-model="list"
        item-key="num"
        animation="300"
        chosenClass="chosen"
        forceFallback="true"
      >
        <template #item="{ element }">
          <div :class="[`item item-${element.num}`]">
            {{ element.num }}
          </div>
        </template>
      </draggable>
    </el-card>
  </Wrapper>
</template>

<script setup>
import draggable from 'vuedraggable'

const gridList = ref([
  { num: 1 },
  { num: 2 },
  { num: 3 },
  { num: 4 },
  { num: 5 },
  { num: 6 },
  { num: 7 },
  { num: 8 },
  { num: 9 },
])
const list = ref([
  { num: 1 },
  { num: 2 },
  { num: 3 },
  { num: 4 },
  { num: 5 },
  { num: 6 },
])
</script>

<style scoped lang="scss">
.grid-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 5px;
}

.item {
  width: 100%;
  height: 150px;
  line-height: 150px;
  text-align: center;
  cursor: move;
  user-select: none;

  &::selection,
  &::-moz-selection {
    background-color: transparent;
  }

}

.item-1 {
  background-color: #ef342a;
}

.item-2 {
  background-color: #f68f26;
}

.item-3 {
  background-color: #4ba946;
}

.item-4 {
  background-color: #0376c2;
}

.item-5 {
  background-color: #c077af;
}

.item-6 {
  background-color: #f8d29d;
}

.item-7 {
  background-color: #b5a87f;
}

.item-8 {
  background-color: #d0e4a9;
}

.item-9 {
  background-color: #4dc7ec;
}

.chosen {
  border: 1px solid var(--el-color-primary);
}
</style>
